<template>
  <div id="mapContainer" style="height: 500px;"></div>
</template>

<script>
export default {
  name: 'MyMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('mapContainer').setView([51.505, -0.09], 13); // 设置初始视图的坐标和缩放级别

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
    }
  }
}
</script>

<style scoped>
#mapContainer {
  width: 100%;
  height: 100%;
}
</style>
